<template>
  <el-card class="tableBox">
    <template #header>
      <div class="card-header">
        <span>报修信息</span>
        <el-button
          class="button"
          type="primary"
          @click="dialogFormVisible = true"
          >下发派单</el-button
        >
      </div>
    </template>
    <el-table :data="tableData" border style="width: 100%" v-loading="loading">
      <el-table-column type="expand">
        <template #default="props">
          <div class="repairBox">
            <h2>公告内容</h2>
            <h3>下发内容</h3>
            <p>{{ props.row.repairDetailTestBringImgs?.test }}</p>
            <div class="imgBox">
              <img
                v-for="(item, index) in JSON.parse(
                  props.row.repairDetailTestBringImgs
                    ? props.row.repairDetailTestBringImgs.imsg
                    : '[]'
                )"
                :src="item"
                :key="index"
                @click="console.log(item)"
              />
              <el-tag
                class="ml-2"
                type="info"
                v-show="
                  JSON.parse(
                    props.row.repairDetailTestBringImgs
                      ? props.row.repairDetailTestBringImgs.imsg
                      : '[]'
                  ).length == 0
                "
                >暂无派单图片</el-tag
              >
            </div>
            <h3>反馈内容</h3>
            <p>{{ props.row.repairResultDetailBringImgs?.test }}</p>
            <div class="imgBox">
              <img
                v-for="(item, index) in JSON.parse(
                  props.row.repairResultDetailBringImgs
                    ? props.row.repairResultDetailBringImgs.imsg
                    : '[]'
                )"
                :src="item"
                :key="index"
                @click="console.log(item)"
              />
              <el-tag
                class="ml-2"
                type="info"
                v-show="
                  JSON.parse(
                    props.row.repairResultDetailBringImgs
                      ? props.row.repairResultDetailBringImgs.imsg
                      : '[]'
                  ).length == 0
                "
                >暂无反馈图片</el-tag
              >
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="taskCode" label="派单码" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="finishTime" label="结束时间" />
      <el-table-column prop="deviceName" label="设备名称" />
      <el-table-column prop="adeviceAddress" label="设备地址" />
      <el-table-column label="派单状态">
        <template #default="props">
          <el-tag class="ml-2" :type="tagMap[props.row.progress]?.type">{{
            tagMap[props.row.progress]?.info
          }}</el-tag>
        </template>
      </el-table-column>
      <!--      <el-table-column fixed="right" label="操作" width="120px">-->
      <!--        <template #default="scope">-->
      <!--          <el-button type="danger" @click.prevent="deleteRow(scope.$index)">-->
      <!--            删除-->
      <!--          </el-button>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>
    <div class="paginationBox">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>

  <!-- 管理员派单对话框 -->
  <el-dialog v-model="dialogFormVisible" title="下发派单">
    <el-form :model="form">
      <el-form-item label="工号" :label-width="formLabelWidth">
        <el-input v-model="form.workerId" />
      </el-form-item>
      <el-form-item label="单号" :label-width="formLabelWidth">
        <el-input v-model="form.TaskId" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="giveTasks"> 派发 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRepairStoreHook } from "@/store/modules/repair";
import { giveTask } from "@/api/repair";
import { message } from "@/utils/message";

// 分页信息
const currentPage = ref(1);
const pageSize = ref(10);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  loadingInfo();
};
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  loadingInfo();
};

// 加载基础信息
let tableData = [];
const total = ref(100);
const repairStore = useRepairStoreHook();
const loading = ref(false);
async function loadingInfo() {
  loading.value = true;
  await repairStore.getTaskInfo(currentPage.value, pageSize.value);
  tableData = repairStore.repairList;
  total.value = repairStore.repairTotal;
  loading.value = false;
}
loadingInfo();

// 维修单对应状态
const tagMap = {
  0: {
    info: "进行中",
    type: ""
  },
  1: {
    info: "已接单",
    type: "success"
  },
  2: {
    info: "已结束",
    type: "info"
  }
};

// 对话框表单相关
const dialogFormVisible = ref(false);
const formLabelWidth = "100px";
const form = reactive({
  workerId: "",
  TaskId: ""
});
const giveTasks = async function () {
  giveTask(form).then(res => {
    if (res == null) {
      message("派单成功", {
        type: "success"
      });
      form.TaskId = "";
      form.workerId = "";
    } else {
      message("发生未知错误", {
        type: "error"
      });
    }
  });
  dialogFormVisible.value = false;
};
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tableBox {
  margin-top: 20px;
}

.paginationBox {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.repairBox {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.repairBox > h3 {
  color: #67c23a;
}

.repairBox > p {
  color: black;
}

.imgBox {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.imgBox > img {
  background-color: #406eeb;
  border-radius: 18px;
  height: 200px;
  width: 200px;
  margin: 5px 5px;
}
</style>
